<!DOCTYPE HTML>
<html lang="en" ng-app="SMS">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="description" content="HTML5 App For SMS.">
    <meta name="keywords" content="HTML5 Audio, HTML5 Video, Music Streaming, Video Streaming">
    <title>Scott's Media Streamer</title>
    <link href="images/favicon_32x32.ico" rel="shortcut icon" />
    <link rel="icon" href="images/favicon_48x48.png" sizes="48x48"/>
    <link rel="icon" href="images/favicon_32x32.png" sizes="32x32"/>
    <link href="style/Style.css" rel="stylesheet" type="text/css" data-name="main" />
    <link href="" rel="stylesheet" type="text/css" data-name="theme" />
    <link href="js/plugins/jquery.layout-default.css" rel="stylesheet" type="text/css" />
    <link href="js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="js/plugins/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="js/plugins/angular.min.js" type="text/javascript"></script>
    <script src="js/plugins/angular-cookies.min.js" type="text/javascript"></script>
    <script src="js/plugins/angular-route.min.js" type="text/javascript"></script>
    <script src="js/plugins/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script src="js/plugins/fancybox/jquery.fancybox.js" type="text/javascript"></script>
    <script src="js/plugins/jquery.base64.js" type="text/javascript"></script>
    <script src="js/plugins/jquery.dateFormat-1.0.js" type="text/javascript"></script>
    <script src="js/plugins/jquery.layout-latest.min.js" type="text/javascript"></script>
    <script src="js/plugins/jquery.scrollTo.min.js" type="text/javascript"></script>
    <script src="js/plugins/UnityShim.js" type="text/javascript"></script>
    <script src="js/plugins/jplayer/jquery.jplayer.min.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/utils.js" type="text/javascript"></script>
    <script src="js/controllers/main.js" type="text/javascript"></script>
    <script src="js/controllers/settings.js" type="text/javascript"></script>
    <script src="js/controllers/playlists.js" type="text/javascript"></script>
    <script src="js/controllers/library.js" type="text/javascript"></script>
    <script src="js/player.js" type="text/javascript"></script>
</head>
<body ng-controller="AppController">
<div id="container">
    <div id="header">
        <div id="messages"></div>    
        <div id="loading"></div>
        <a id="jslogo" title="Media Streamer"></a> 
        <div id="nav">
            <ul class="tabs">
            <li><a href="#/library" class="first" title="Library" ng-class="{'active': isActive('/library')}"><img src="images/headphones_gd_16x14.png" /></a></li>
            <li><a href="#/playlists" title="Playlists" ng-class="{'active': isActive('/playlists')}"><img src="images/list_gd_16x14.png" /></a></li>
            <li><a href="#/settings" class="last" title="Settings" ng-class="{'active': isActive('/settings')}"><img src="images/cog_16x16.png" /></a></li>
            </ul>
        </div>
    </div>
    <div id="content">
        <!-- Main -->
        <div ng-view></div>  
           
        <div id="SideBar">
            <div id="NowPlaying">
                <div class="header"><img src="images/rss_12x12.png" /> Now Playing</div>
                <div id="NowPlayingList"><span class="user">Loading...</span></div>
            </div>
        </div>
        <!-- Audio Player -->
        <div class="clear"></div>
        
    <div class="clear"></div>
    <div id="player">
        <div id="playerleft" class="floatleft">
            <div class="playeractions floatleft">
                <a class="button" id="PreviousTrack" title="Previous Track" ng-click="previousTrack()"><img src="images/first_24x24.png" /></a>
                <a class="button" id="PlayTrack" title="Play/Pause" ng-click="defaultPlay()"><img src="images/play_24x32.png" /></a>
                <a class="button" id="PauseTrack" title="Play/Pause" style="display: none;"><img src="images/pause_24x32.png" /></a>
                <a class="button" id="NextTrack" title="Next Track" ng-click="nextTrack()"><img src="images/last_24x24.png" /></a>
            </div>
            <div id="mediadetails">
                <div id="coverArt"><a class="coverArtFancy" href="{{playingMediaElement.coverArtFull}}"><img ng-src="{{playingMediaElement.coverArtThumb}}" src="images/coverdefault_60.jpg" alt=""/></a></div>
                <ul>
                <li class="title" id="{{playingMediaElement.id}}" ng-bind-html-unsafe="playingMediaElement.name"></li>
                <li class="album" ng-bind-html-unsafe="playingMediaElement.album"></li>
                <li id="mediadetails_controls">
                    <a href="" id="action_Mute" class="mute first" title="Mute"></a>
                    <a href="" id="action_UnMute" class="unmute first" title="Unmute" style="display: none;"></a>
                    <div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div><a href="" id="action_VolumeMax" class="volume" title="Max Volume"></a>
                    <a href="" class="loop" title="Repeat" ng-click="toggleSetting('Repeat')" ng-class="{'hoverSelected': !settings.Repeat }"></a>
                    <a href="" id="action_SaveProgress" class="lock" title="Save Track Position: On" ng-show="settings.SaveTrackPosition"></a>
                </li>
                </ul>
                <div class="vertshade"></div>
            </div>
            <div id="playdeck_1"></div>
            <div id="playdeck_2"></div>
            <div id="submenu_CurrentPlaylist" class="submenu shadow" style="display: none;">
            <table id="CurrentPlaylistPreviewContainer" class="simplelist mediaelementlist">
            <thead></thead>
            <tbody></tbody>
            </table>
            </div>
        </div>
        <div class="playeractionssmall"><!--<a href="" class="button" id="action_ToggleSideBar" title="Toggle Side Bar"><img src="images/arrow_right_gl_12x12.png" /></a>--></div>
        <div id="playermiddle">
            <div id="audiocontainer">
                <div class="audiojs" id="audio_wrapper0">
                <div class="scrubber"><div class="progress"></div><div class="loaded"></div></div>
                <div class="time"><em id="played">00:00</em>/<strong id="duration">00:00</strong></div>
                <div class="error-message"></div>
                </div>
            </div>
            <div id="preview"></div>
        </div>
        <div class="clear"></div>
    </div>
    </div><!-- end #content -->
</div> <!-- End container -->
<div id="footer">
    <div id="QueuePreview">
        <div class="queueactions">
            <a href="" class="button buttonvertical" title="Shuffle Queue" ng-click="queueShuffle()"><img src="images/fork_gd_11x12.png" /></a><br />
            <a href="" class="button buttonvertical" id="action_Empty" title="Delete Queue" ng-click="queueEmpty()"><img src="images/trash_fill_gd_12x12.png" /></a><br />
            <a href="" class="button buttonvertical" id="action_DeleteSelected" title="Delete Track(s) From Queue" ng-click="queueRemoveSelected()"><img src="images/minus_8x2.png" /></a><br />
        </div>
        <ul id="QueuePreviewList" class="mediaelementlist noselect">
            <li class="row mediaelement" ng-repeat="o in queue track by $index" ng-class="{'playing': o.playing, 'selected': o.selected}" ng-click="selectMediaElement(o)" ng-dblclick="playMediaElement(false, o)" id="{{o.id}}" parentid="{{o.parentid}}">
                <div class="coverArt"><a class="coverArtFancy" href="{{o.coverArtFull}}"><img class="" ng-src="{{o.coverArtThumb}}" src="images/coverdefault_25.jpg" /></a></div>
                <div class="clear"></div>
                <div class="title" title="{{ o.track + ' - ' + o.title + ' - ' + o.time }}" ng-bind-html-unsafe="o.name"></div>
                <div class="albumtext" title="{{o.album}}" ng-bind-html-unsafe="o.album"></div>
                <div class="albumtext" title="{{o.artist}}" ng-bind-html-unsafe="o.artist"></div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
